<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .p1{
            color: red;
        }
        .big{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="p1">我是p标签</p>
    <button onclick="addBig()">添加big</button>
    <button onclick="removeBig()">移除big</button>
    <button onclick="removeP1()">移除p1</button>
    <script>
        // 动态的添加属性
        var pEl = document.querySelector('.p1');
        console.log(pEl.className);

        function addBig(){
            myAddClassName(pEl,'big');
        }
        function removeBig(){
            myRemoveClassName(pEl,'big');
        }

        function removeP1(){
            myRemoveClassName(pEl,'p1');
        }

        /**
        * 自定义的添加class的方法 
        */
        function myAddClassName(el,className){
            // 1. 验证是否存在clssName
            // 假设 元素存在class属性
            if(el.className){
                // "p1 big" ==> [p1,big]
                var classNameArr = el.className.split(' ');
                // 检测数组是否存在某个className
                if(classNameArr.indexOf(className)!=-1){
                    console.log('已存在:'+className);
                    return;
                }
            }
            // 如果存在className 则加空格 
            className = el.className?(' '+className):className;
            el.className += className;
        }
        /**
        * 移除class
        */
        function myRemoveClassName(el,className){
            // 1. 把className转换成数组
            if(el.className){
                // "p1 big" ==> [p1,big]
                var classNameArr = el.className.split(' ');
                // 检测某个元素的位置
                var index = classNameArr.indexOf(className);
                // 说明不存在 不用操作
                if(index == -1){
                    console.log('className: '+className+' 不存在!');
                }else{
                    //存在 就要操作 删除下标index开始的一个元素 splice会影响数组本身
                    classNameArr.splice(index,1);
                    // jion 可以把数组变成字符串
                    var classNameStr = classNameArr.join(' ');
                    el.className = classNameStr;
                }
            }
        }
    </script>
</body>
</html>